$(function(){
	//读取本地存储的数据
	function read(){
		var data = localStorage.getItem('todolist')
		if(data === null){
			return []
		}else{
			return JSON.parse(data)
		}
	}
	
	
	//向本地填入数据
	function write(data){
		localStorage.setItem('todolist',JSON.stringify(data))
	}
	
	
	//将本地数据渲染到页面,并改变数字
	function load(){
		var data = read()
		$('ul').html('')
		$.each(data,function(index,ele){
			var text = ele.title
			var flag = ele.done
			var li = $(`<li index=${index}></li>`)
			var input = $('<input type=\'checkbox\'/>')
			var a = $('<a href=\'javascript:;\'></a>')
			li.text(text)
			if(flag){
				li.prependTo($('#body ul:eq(1)'))
			}else{
				li.prependTo($('#body ul:eq(0)'))
			}
			input.prependTo(li)
			a.appendTo(li)
		})
		$('.num').eq(1).text($('#ed li').length)
		$('.num').eq(0).text($('#ing li').length)
	}
	
	//改变done属性
	function changeDone(index){
		var local = read()
		local[index].done = !local[index].done
		write(local)
	}
	
	//删除本地数据
	function deleteData(index){
		var local = read()
		local.splice(index,1)
		write(local)
	}
	
	//刷新时自动渲染数据
	load()
	
	//input文本框聚焦时
	$('#head input').focus(function(){
		$(this).val('').css('color','black')
	})
	
	//input文本框失焦时
	$('#head input').blur(function(){
		$('#head input').val('添加ToDo').css('color','grey')
	})
	
	
	//回车后插入正在进行
	$(window).keydown(function(e){
		var local = read()
		if(e.keyCode === 13 && $('#head input').val() != '' && $('#head input').val() != '添加ToDo'){
			local.push({title : $('#head input').val(),done : false})
			write(local)
			load()
			$('#head input').blur()
		}
	})
	
	//点击checkbox框时
	$('ul').on('change','input',function(){
		changeDone($(this).parent().attr('index'))
		load()
	})
	
	//点击a标签删除时
	$('ul').on('click','a',function(){
		deleteData($(this).parent().attr('index'))
		load()
	})
})